<template>
    <div
    v-mtrans:slide-right="dataShow"
    class='m-comp-search-list'>
        <!--  search bar-->
      <div class="search-bar">
        <div class='row'>
        </div>
        <label class='input-wrap help-inline'>
          <span class="ico ico-search"></span><div class='input-box help-inline'>
            <input type="text" class='keywords'
            :placeholder="Lang[placeholderTitleId]"
            v-model='keywords'/>
          </div>
        </label>
        <span class="ico ico-clear-input" @click="keywords=''"></span>
        <span class="ico ico-record"></span>
        <span class="ico ico-close-black" @click='hideSearchList()'></span>
        </div>
        <!--  search bar-->
        <!--  scroller-->
      <div class="m-scroller-wrap" >
          <div class='m-scroller-body' :id="scroller_id">
            <div class="m-scroller-list search-list" class="search-list">
              <div class='item border_gray_bottom' v-for='item in results'>
                <div class='row middle-xs no-col-padd' @click='chooseItem($index)'>
                  <div class='col-xs-11'>
                    <div class='row'>
                      <div v-for='key in dataKey' :class="'col-xs-'+dataCol[$index]">
                        {{item[key]}}
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-1 text-right"><span class='ico ico-left-up'></span></div>
                </div>
              </div>
              <div class='item row-padding' v-if='results.length==0'>
                <div class='tex-center'>Your Recent search.</div>
              </div>
            </div>
          </div>
      </div>
        <!--  scroller-->
    </div>

</template>

<script>
import {toggleAppFullPage} from '../../actions/uiAction'
import {UUID}  from '../../public/common/Common'
import IScroll from 'IScroll'
import {requestAnimFrame,TransitionEnd} from '../../public/common/utils'
export default {
  vuex:{
    getters: {
      Lang:({Lang})=>Lang.lang,
      allCar:({carInfo})=>carInfo.allCar
    },
    actions:{
      toggleAppFullPage
    }
  },
  props:{
    dataKey:{
      type:Array
    },
    dataCol:{
      type:Array
    },
    dataList:{
      type:Array,
      default:function(){
        return []
      }
    },
    dataShow:{
      type:Boolean,
      default:false
    },
    dataType:{
      type:String,
      default:'cars'
    },
    placeholderTitleId:{
      type:String,
      default:''
    },
    keywords:{
      type:String,
      default:''
    }
  },
  data: function () {
    return {
      scroller_id:'Scroller_'+UUID(15),
      results:[],
      searchListScroller:null,
      isFirst:true,
      dshow:false
    }
  },
  computed: {},
  ready: function () {
    let comp=this.$el
    let self=this;
    this.setSearchCarsByInput(this.allCar);
  },
  attached: function () {},
  methods: {
    chooseItem(index){
      var type=this.dataType
      this.$dispatch('close-search-list',{index:index,data:_.extend({},this.results[index]),type});
    },
    hideSearchList(){
      // this.$set("dataShow",false)
      this.$dispatch('close-search-list');

    },
    setSearchCarsByInput(dataList){
      if(!dataList||dataList.length==0){return}
      let results=[];
      let searchValue=this.keywords
      let cars = dataList
      searchValue=searchValue.replace(/\s/g,'')
      if(searchValue.length!=0){
        let pattern = new RegExp('^'+searchValue+'','i')
        results=_.chain(cars).filter((item)=>{
          if(item.CarNameEN.replace(/\s/g,'').match(pattern)||
          (item.CarNameCH&&item.CarNameCH.replace(/\s/g,'').match(pattern))){
            return true
          }
        }).sortBy((item)=>{
          return item.CarNameEN.replace(/\s/g,'').indexOf(searchValue)
        }).value();
      }
      this.$set('results',results)
      this.$nextTick(()=>{
        requestAnimFrame(()=>{
          this.searchListScroller&&this.searchListScroller.refresh();
        })
      })
    }
  },
  watch:{
    'allcar':function(allCar){
      this.setSearchCarsByInput(allCar);
    },
    'keywords':function(newVal,oldVal){
      console.log(newVal,oldVal,this.results)
      if(newVal==oldVal)return;
      var self = this;
      var dataType = self.dataType;
      switch(dataType){
        case 'cars':
          this.setSearchCarsByInput(this.allCar);
          break;
        default:
      }
    },
    'dataShow':function(nval,oval){
      this.toggleAppFullPage(nval)
      if(nval){
          if(this.searchListScroller==null){
            this.$set('searchListScroller',
              new IScroll('#'+this.scroller_id, {
                preventDefault:false,
                preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT|A)/},
                scrollbars: true,
                mouseWheel:true,
                shrinkScrollbars: 'scale',
                fadeScrollbars: false
              })
            );
          }else{
              self.searchListScroller&&self.searchListScroller.refresh();
          }
      }
    },
    destroy(){
      this.searchListScroller&&this.searchListScroller.destroy();
    }
  }
}
</script>

<style lang="sass">

</style>
